<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>picWindow</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#prevImg{
			display: block;
			width: 500px;
			height: 240px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			/*display: block;*/
			margin: 20px auto;
		}
		#prevImg:hover{
			opacity: 0.8;
			cursor: pointer;
		}
		#model{
			display: none;
			background: #000;
			z-index: 1;
			width: 100%;
			height: 100%;
			position: fixed;
		}

		#model #closeBtn{
			color: #fff;
			width: 30px;
			height: 30px;
			position: absolute;
			right: 20px;
			top: 20px;
		}

		#model .picZone{
			display: block;
			margin: 70px auto;
			width: 70%;
			height: 60%;
		}
		#model .picZone img{
			width: 100%;
			height: 100%;
		}
		#model .picZone p{
			color: #fff;
			text-align: center;
			margin-top: 50px;
		}

		/* 添加动画 */
		/*图片和标题动画*/
		.modal-content, .caption {
			/*带有-webkit-样式为兼容浏览器写法*/
			/*定义动画名字*/
			-webkit-animation-name: zoom;
			/*定义动画持续时间*/
			-webkit-animation-duration: 0.6s;
			animation-name: zoom;
			animation-duration: 0.6s;
		}
		/*使用动画*/
		@-webkit-keyframes zoom {
			/*最小面积*/
			from {-webkit-transform:scale(0)}
			/*最大面积*/
			to {-webkit-transform:scale(1)}
		}

		@keyframes zoom {
			from {
				transform: scale(0)
			}
			to {
				transform: scale(1)
			}
		}
	</style>
</head>
<body>
	<img id="prevImg" src="picWindow.jpg" alt="文本描述信息">
	<div id="model">
		<span id="closeBtn">X</span>
		<div class="picZone">
			<img class="modal-content" src="picWindow.jpg" alt="文本描述信息">
			<p class="caption">文本描述信息</p>
		</div>
	</div>
	<script>
		var prevImg = document.getElementById('prevImg'),
			model = document.getElementById('model'),
			closeBtn = document.getElementById('closeBtn');
		prevImg.onclick = function () {
			prevImg.style.display = "none";
			model.style.display = "block";
		}
		closeBtn.onclick = function () {
			prevImg.style.display = "block";
			model.style.display = "none";
		}
	</script>
</body>
</html>